<template>
  <div class="list-container">
   <!-- <NavCard @change="handleTabChange"></NavCard> -->
    <NavCard></NavCard>
    <BreadCrumb class="bread-crumb" />
    <h2 class="title">{{ pageText }}列表<span>统计预警信息数：<span class="number">{{ personTotal }}</span></span></h2>
    <div class="detail">
      <!-- <router-view @total-updated="updateTotal"/> -->
      <router-view/>
    </div>
  </div>
</template>
<script>
import NavCard from '@/views/pre-warning-statistics/components/nav-card.vue'
import BreadCrumb from '@/components/bread-crumb/index.vue'
import { warningstatistics} from "@/api/his/statistics";
import { disposalstatistics} from "@/api/his/statistics";
import { getSecondMenu } from "@/api/his/getMenu";
export default {
  name: 'PreWarningStatistics',
  components: {
    NavCard,
    BreadCrumb,
  },
  data() {
    return {
      personTotal: 0,
      pageText: '逾期处置统计',
      cur: 1,
      navList: [],
      total: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        registerNumber: null,
        institutionName: null
      },
    }
  },
  created() {
    this.$router.afterEach((to, from) => {
      this.updateTotle(to.path);
    });
    this.getList()
  },
  methods: {
    updateTotle(path){
      const parentId = localStorage.getItem("menuId")
      getSecondMenu(parentId).then(response =>{
        this.navList = response.map(item => ({
          text: item.menuName.replace(/系统/g, ''),
          path: this.addLeadingSlash(item.path),
          menuId: item.menuId
        }));
        for(const item of this.navList){
          if(item.path === path){
            this.pageText = item.text;
            this.getList(path);
            break
          }
        }
      });
    },
    getList(path) {
      var that = this
      if(path === "/pre-warning-statistics/disposition"){
       disposalstatistics(this.queryParams).then(response => {
         that.personTotal = response.total;
       });
      }else{
        warningstatistics(this.queryParams).then(response => {
          // this.personTotal = response.msg;
          that.personTotal = response.total;
        });
      }
    },
    addLeadingSlash(path) {
      // 确保路径以斜杠开头
      return path.startsWith('/') ? path : `/${path}`;
    },
  }
}
</script>
<style lang="scss" scoped>
.list-container {
  margin-top: 17px;
  height: calc(100% - 17px);
  display: flex;
  flex-direction: column;
  background-color: #F7F8FD;

  .tab {
    display: flex;
    align-items: center;
    margin-top: 17px;
    padding: 17px 18px 0;
    background-color: #fff;
    .tab-item {
      margin-right: 31px;
      font-weight: 500;
      font-size: 18px;
      color: #514F4F;
      height: 18px;
      line-height: 18px;
      cursor: pointer;

      &--active {
        color: #000;
      }
    }
  }

  .title {
    font-size: 26px;
    color: #4B4B4B;
    font-weight: bold;
    margin: 0;
    margin-top: 18px;
    padding-left: 20px;

    span {
      font-weight: 500;
      font-size: 18px;
      color: #4B4B4B;
      margin-left: 16px;
    }

    .number {
      color: #4373F1;
    }
  }
}

.bread-crumb {
  margin-top: 21px;
  padding-left: 20px;
}

.detail {
  margin-top: 9px;
  margin-left: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 5px;

}
</style>
